import React, { useEffect, useState } from 'react'
import './Reminders.css'
import { useNavigate } from 'react-router-dom'
import { NavBar, Card,  Switch } from 'antd-mobile'

export default function Reminders() {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    return (
        <div className='reminders'>
            <div className='reminders-top'>
                <NavBar
                    right={<p><b style={{ fontSize: '1rem' }}>添加</b></p>}
                    backIcon={null} back={<img src='https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%AF%8F%E6%97%A5%E6%8F%90%E9%86%92/u1273.png' />} onBack={back}>
                    <b className='shez-top-title' style={{ fontSize: '1rem' }}>每日提醒</b>
                </NavBar>
            </div>
            <div className='reminders-content'>
                <div className='reminders-content-box'>
                    <Card>
                        <div>
                            <div className='content-box-title'>
                                <p>专注提醒</p>
                                <Switch />
                            </div>
                            <div className='content-box-text'>
                                <p className='content-box-text-left'>{"10:00"}</p>
                                <p className='content-box-text-right'>设置</p>
                            </div>
                        </div>
                    </Card>
                    <Card>
                        <div>
                            <div className='content-box-title'>
                                <p></p>
                                <Switch />
                            </div>
                            <div className='content-box-text'>
                                <p className='content-box-text-left'>{"10:00"}</p>
                                <p className='content-box-text-right'>设置</p>
                            </div>
                        </div>
                    </Card>
                </div>
            </div>
        </div>
    )
}
